<template>
  <eip-modal :visible="visible" title="确认层设置" @close="cancel" :width="600">
    <template slot="body">
      <a-form-model ref="form" layout="vertical" :model="form">
        <a-form-model-item label="标题">
          <a-input v-model="form.title"></a-input>
        </a-form-model-item>
        <a-form-model-item label="说明">
          <a-input v-model="form.content"></a-input>
        </a-form-model-item>
        <a-form-model-item label="确认按钮">
          <a-input v-model="form.ok"></a-input>
        </a-form-model-item>
        <a-form-model-item label="取消按钮">
          <a-input v-model="form.cancel"></a-input>
        </a-form-model-item>
      </a-form-model>
    </template>
    <template slot="footer">
      <div class="flex justify-between align-center">
        <div></div>
        <a-space>
          <a-button @click="cancel"><a-icon type="close" />关闭</a-button>
          <a-button key="submit" type="primary" @click="ok"
            ><a-icon type="save" />提交</a-button
          >
        </a-space>
      </div>
    </template>
  </eip-modal>
</template>

<script>
export default {
  name: "button-confirm",
  data() {
    return {
      config: {
        labelCol: { span: 4 },
        wrapperCol: { span: 20 },
      },
      form: {
        title: "你确认执行此操作吗？",
        content: "",
        ok: "确认",
        cancel: "取消",
        remark: false, //启用后，用户需要对操作进行备注说明
        remarkConfig: {
          name: "操作原因", //备注名称
          guidingText: "", //引导文字
          notEmpty: false, //是否允许为空
        },
      },
    };
  },

  props: {
    visible: {
      type: Boolean,
      default: false,
    },
    title: {
      type: String,
    },
    options: Object,
  },

  async mounted() {
    this.form = Object.assign(this.form, this.options);
  },
  methods: {
    /**
     * 取消
     */
    cancel() {
      this.$emit("update:visible", false);
    },
    /**
     * 确定
     */
    ok() {
      this.$emit("ok", this.form);
      this.cancel();
    },
  },
};
</script>
<style scoped lang="less"></style>
